<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Floor View</title>
<script src="/js/websocket.js"></script>
<script src="/js/jquery.min.js"></script>
<script id="code">
    var DEBUG_FLAG = true;
    $(function()
    {
        //启动websocket
        createWebSocket();

    });

    // 当有消息推送后触发下面事件
    function onWsMessage(evt) {
        var jsonStr = evt.data;
        writeToScreen(jsonStr);
    }

    function writeToScreen(message) {
        if(DEBUG_FLAG)
        {
            $("#debuggerInfo").val($("#debuggerInfo").val() + "\n" + message);
        }
    }

    function sendMessageBySocket()
    {
      var toUserId = $("#userId").val();
      var msg = $("#msg").val();
      var data = {"fromUserId": userId,"toUserId": toUserId,"msg": msg};
      wsObj.send(JSON.stringify(data));
    }
    
    function sendMessage() {
      var toUserId = $("#userId").val();
      var msg = $("#msg").val();
      $.ajax({
        //请求方式
        type : "GET",
        //请求地址
        url : "http://localhost:8071/monitor/sendMessage",
        //数据，json字符串
        data : {"fromUserId": userId,"toUserId": toUserId,"msg": msg},
        //请求成功
        success : function(result) {
          console.log(result);
        },
        //请求失败，包含具体的错误信息
        error : function(e){
          console.log(e.status);
          console.log(e.responseText);
        }
      });
    }
</script>
</head>

<!-- <body style="margin: 0px;padding: 0px;overflow: hidden; ">--> 
<input style="margin: 0px;padding: 0px;overflow: hidden; ">
  <!-- 调试用,默认关闭,调试时通过地址栏debug参数打开--> 
  <textarea id="debuggerInfo" style="width:100%;height:200px;"></textarea>

  <!-- 发送消息-->
  <div>消息：<input type="text" id="msg"></input></div>
  <div>用户：<input type="text" id="userId"></input></div>
  <div><input type="button" value="发送消息（通过session)" onclick="sendMessage()"></input></div>
  <div><input type="button" value="发送消息（通过后台controller)" onclick="sendMessageBySocket()"></input></div>

</body>
</html>